<%@ page import="com.scau.ums.model.User" %><%--
  Created by IntelliJ IDEA.
  User: best魔王
  Date: 2019/7/22
  Time: 10:02
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html class="no-js" lang="en">
<script src="/js/jquery-3.2.1min.js"></script>

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>失物列表</title>
    <meta name="robots" content="noindex, follow" />
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="/img/favicon.ico">

    <!-- CSS
	============================================ -->
    <!-- google fonts -->
    <link href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,300i,400,400i,600,700,800,900%7CPoppins:300,400,500,600,700,800,900" rel="stylesheet">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="/css/bootstrapmin.css">
    <!-- Font-awesome CSS -->
    <link rel="stylesheet" href="/css/font-awesomemin.css">
    <!-- Slick slider css -->
    <link rel="stylesheet" href="/css/slickmin.css">
    <!-- animate css -->
    <link rel="stylesheet" href="/css/animate.css">
    <!-- Nice Select css -->
    <link rel="stylesheet" href="/css/nice-select.css">
    <!-- jquery UI css -->
    <link rel="stylesheet" href="/css/jqueryuimin.css">
    <!-- main style css -->
    <link rel="stylesheet" href="/css/style.css">

    <!--notification样式-->
    <style type="text/css">
        .notification {
            /*width: 360px;*/
            /*height: 110px;*/
            /*z-index: 9000;*/
            /*position: fixed;*/
            /*box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);*/
            /*padding: 20px;*/
            /*margin: 0.5rem 0 1rem 0;*/
            /*border-radius: 2px;*/
            /*background-color: #fff;*/
        }

        .notification .dismiss {
            top: 10px;
            right: 10px;
            width: 20px;
            height: 20px;
            color: #fff;
            text-align: center;
            line-height: 20px;
            overflow: hidden;
            position: absolute;
            background-color: #B8B8B8;
            border-radius: 50%;
        }

        .notification .illustration {
            margin-right: 20px;
            float: left;
        }

        .notification .illustration img {
            border-radius: 50%;
        }

        .notification .text .title {
            font-size: 18px;
            font-weight: bold;
        }
        .table-operation-botton{
            background-color: #dee1e6;
            color: #444444;
            padding: 3px 3px;
            font-size: 13px;
            border-radius: 4px;
        }
        .table-operation-botton:hover {
            background: #f0f2f3;
        }
        .jumpbtn:hover{
            color: #0000FF;
        }

    </style>

    <!--notification.js样式-->
    <script>

        Notification = window.Notification || {};

        Notification = function () {

            'use strict';

            var number = 0;
            var incPosition = 0;

            var template = function (title, text, image, position) {
                incPosition = number * 120;
                number = number + 1;
                var textHtml = '<div class="text">' + text + '</div>';
                var titleHtml = (!title ? '' : '<div class="title">' + title + '</div>');
                var imageHtml = (!image ? '' : '<div class="illustration"><img src="' + image + '" width="70" height="70" /></div>');
                var style;
                switch (parseInt(position, 10)) {
                    case 1:
                        style = "top:" + incPosition + "px; left:20px;";
                        break;
                    case 2:
                        style = "top:" + incPosition + "px; right:20px;";
                        break;
                    case 3:
                        style = "bottom:" + incPosition + "px; right:20px;";
                        break;
                    case 4:
                        style = "bottom:" + incPosition + "px; left:20px;";
                        break;
                    default:
                        ;
                }
                return {
                    id: number,
                    content: '<div style="undefinedposition: ;position: fixed;top: 15px;z-index: 33;width: 360px;height: 85px;background: wheat;box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12)" class="notification notification-' + number + ' " style="' + style + '">' +
                        '<div class="dismiss">&#10006;</div>' +
                        imageHtml +
                        '<div class="text">' + titleHtml + textHtml + '</div>' +
                        '</div>'
                };
            };

            var hide = function (id) {
                $(document).find('.notification-' + id).remove();
                number = number - 1;
            };

            var create = function (title, text, image, animation, position, delay) {
                var notification = template(title, text, image, position);
                $(notification.content).addClass('animated ' + animation).appendTo('body');
                if (!delay) {
                    delay = 2;
                }
                setTimeout(function () {
                    hide(notification.id);
                }, 1000 * delay);
            };

            return {
                create: create
            };

        }();

    </script>

    <script src="/js/jquery-3.2.1min.js"></script>

    <%--"我的"按钮判断跳转--%>
    <script>
        function wodeRedirect() {
            var jsUserType = '<%=request.getSession().getAttribute("USER_TYPE")%>';
            if(jsUserType=='<%=User.ADMIN%>')
            {
                window.location.href="/adminEntrance";
            }
            if(jsUserType=='<%=User.MAINTAINER%>')
            {
                window.location.href="/maintainerEntrance";
            }
            if(jsUserType=='<%=User.STUDENT%>'||jsUserType=='<%=User.TEACHER%>')
            {
                window.location.href="/userEntrance";
            }
        }
    </script>
</head>
<script>
    //将jason字符串中的null转为空白符
    function null2str(data) {
        for (let x in data) {
            if (data[x] === null) { // 如果是null 把直接内容转为 ''
                data[x] = '';
            } else {
                if (Array.isArray(data[x])) { // 是数组遍历数组 递归继续处理
                    data[x] = data[x].map(z => {
                        return null2str(z);
                    });
                }
                if(typeof(data[x]) === 'object'){ // 是json 递归继续处理
                    data[x] = null2str(data[x])
                }
            }
        }
        return data;
    }

    function getUserByKeyword() {
        var keyword = document.getElementById("search-keyword").value;
        getLost(1,keyword);
    }

    function JumpCheck(sumPage,keyword) {
        var page;
        if(document.getElementById("jumpPage").value == null || document.getElementById("jumpPage").value === "")
            page = 1;
        else
            page = parseInt(document.getElementById("jumpPage").value);

        var toPage;
        if(page < 1 ){
            toPage = 1;
        }
        else if(page <= sumPage){
            toPage = page;
        }
        else {
            toPage = sumPage;
        }
        getLost(toPage,keyword);
    }

    function getLost(page,keyword) {
        if(keyword == null || keyword === "undefined")
            keyword = "";
      $.ajax({
          url:"/showlist?curPage=" + page + "&keyword=" + keyword,
          contentType:"application/json;charset=UTF-8",
          data:{},
          type:"post",
          success:function (data) {
              data = null2str(data);
              var curPage = data.curPage;
              var finalPage = data.sumPage;
              var keyword = data.keyword;
              var totalRecord = data.totalRecord;

              var lastPage;//上一页
              var nextPage;//下一页
              //对上、下页的范围限制
              if((curPage - 1) <= 1){
                  lastPage = 1;
              }
              else lastPage = curPage - 1;
              if((curPage + 1) >= finalPage){
                  nextPage = finalPage;
              }
              else nextPage = curPage + 1;

              let htm = "";
              if(keyword != "" && keyword != null){
                  htm += "<div style='margin-bottom: 10px;text-align: left'>“" + keyword + "”的搜索结果:</div>";
              }

              $(".lostlist").empty();
                  htm +="<div style='text-align: left'>"+
                  "共" + finalPage + "页，" + totalRecord +"条记录<br/>" +
                  "    <table class=\"table table-bordered\">\n" +
                  "      <colgroup>\n" +
                  "        <col width=\"330px\">\n" +
                  "        <col width=\"660px\">\n" +
                  "        <col width=\"330px\">\n" +
                  "      </colgroup>\n" +
                  "      <thead class=\"thead-light\">\n" +
                  "        <tr>\n" +
                  "          <th>遗失物品</th>\n" +
                  "          <th>物品描述</th>\n" +
                  "          <th>联系电话</th>\n" +
                  "        </tr>\n" +
                  "      </thead>\n" +
                  "      <tbody>\n";
              var lostInfo = data.lostInfoList;
              for(var p in lostInfo){//遍历json对象的每个key/value对,p为key

                  //document.getElementById("itemname").innerHTML = data[p].itemname;

                  htm+=
                      "          <tr>\n" +
                      "            <td>"+lostInfo[p].itemname+"</td>\n" +
                      "            <td>"+lostInfo[p].itemdesc+"</td>\n" +
                      "            <td>"+lostInfo[p].telephone+"</td>\n" +
                      "          </tr>\n";
              }
              htm += " </tbody>\n" +
                  " </table>\n" +
                  " </div>";
              htm += "<div class=\"jump-div\">\n" +
                  "   <div style='float: left;margin-right: 6%'><button class='jumpbtn' style='cursor: pointer;' onclick='getLost(1," + keyword + ")'>首页</button></div>" +
                  "   <div style='float: left;margin-right: 6%'><button class='jumpbtn' style='cursor: pointer;' onclick='getLost(" + lastPage + "," + keyword + ")'>上一页</button></div>" +
                  "   <div style='float: left;margin-right: 6%'><button class='jumpbtn' style='cursor: pointer;' onclick='getLost(" + curPage + "," + keyword + ")'>当前第" + curPage + "页</button></div>" +
                  "   <div style='float: left;margin-right: 6%'><button class='jumpbtn' style='cursor: pointer;' onclick='getLost(" + nextPage + "," + keyword + ")'>下一页</button></div>" +
                  "   <div style='float: left;margin-right: 6%'><button class='jumpbtn' style='cursor: pointer;' onclick='getLost(" + finalPage + "," + keyword + ")'>尾页</button></div>" +
                  "   <div style='float: left;margin-right: 3%'>跳至 <input id='jumpPage' type='text' style='width: 50px;height: 20px'/> 页</div>" +
                  "   <div style='float: left;'><button class='jumpbtn' id='stu-search-btn' onclick='JumpCheck(" + finalPage +"," + keyword + ")'>跳转</button></div>" +
                  "   </div>"
              $(".lostlist").append(htm);
          },
          error:function () {
              alert("failed");
          }
      })
    }
    window.onload = getLost(1,"");

</script>
<body>
<header class="header-area">
    <!-- header 开始 -->
    <div class="main-header d-none d-lg-block">
        <!--顶部条开始-->
        <div class="header-top black-bg">
            <div class="container">
                <!--界面布局设计-->
                <div class="row align-items-center">
                    <div class="col-lg-6">
                        <div class="top-left-navigation">
                            <ul class="nav align-items-center">
                            </ul>
                        </div>
                    </div>
                    <div class="col-lg-6 d-flex justify-content-end">
                        <div class="header-social-link">
                        </div>
                        <ul class="user-info-block">
                            <!--登录开始-->
                            <%if (request.getSession().getAttribute("USER_NAME")==null){%>
                            <li><a href="/login"><i class="fa fa-sign-in"></i> 登录</a></li>
                            <%}else{%>
                            <ul class="nav">
                                <!--登录开始-->
                                <li class="mini-cart-wrap">
                                    <a href="#" class="minicart-btn">
                                        <span class="fa fa-user-circle-o"></span>
                                        <% String username=(String)request.getSession().getAttribute("USER_NAME");System.out.println(username);out.print(username);%>
                                        <span id="notification" class="notification" style="top: -5px;
                                                      right: 40px;
                                                      position: absolute;
                                                      width: 18px;
                                                      height: 18px;
                                                      text-align: center;
                                                      line-height: 18px;
                                                      font-size: 10px;
                                                      color: #fff;
                                                      border-radius: 50%;
                                                      background-color: #87b106;"></span>
                                    </a>

                                    <!--websocket实时接收消息-->
                                    <script>
                                        $(function () {
                                            transferCircleNumber();
                                        })
                                        // var noticeSum=0;
                                        // $.ajax({
                                        //   url: "/receiveInfo",
                                        //   async:true,
                                        //   type: "GET",
                                        //   dataType:"json",
                                        //   success: function (res) {  //res是server端响应
                                        //     noticeSum++;
                                        //     console.log(res);
                                        //     if(res==0){
                                        //       document.getElementById("notification").style.display="none";
                                        //     }
                                        //     else{
                                        //       document.getElementById("notification").innerText=noticeSum.toString();
                                        //     }
                                        //   }
                                        // })
                                        // var noticeSum=0;
                                        // if(noticeSum==0){
                                        //   document.getElementById("notification").style.display="none";
                                        // }
                                        // $(function() {
                                        //   var websocket;
                                        //   if('WebSocket' in window) {
                                        //     console.log("此浏览器支持websocket");
                                        //     websocket = new WebSocket("ws://localhost:8080/websocket");
                                        //   } else if('MozWebSocket' in window) {
                                        //     alert("此浏览器只支持MozWebSocket");
                                        //   } else {
                                        //     alert("此浏览器只支持SockJS");
                                        //   }
                                        //   websocket.onopen = function(evnt) {
                                        //     console.log(evnt);
                                        //     $("#tou").html("链接服务器成功!")
                                        //   };
                                        //   websocket.onmessage = function(evnt) {
                                        //     noticeSum++;
                                        //     document.getElementById("notification").style.display="block";
                                        //     document.getElementById("notification").innerText=noticeSum.toString();
                                        //     alert(evnt);
                                        //   };
                                        //   websocket.onerror = function(evnt) {};
                                        //   websocket.onclose = function(evnt) {
                                        //     console.log("与服务器断开了链接!");
                                        //     $("#tou").html("与服务器断开了链接!")
                                        //   }
                                        //
                                        //   $('#close').bind('click', function() {
                                        //     websocket.close();
                                        //   });
                                        //
                                        //   $('#send').bind('click', function() {
                                        //     send();
                                        //   });
                                        //
                                        //   function send() {
                                        //     if(websocket != null) {
                                        //       var message = document.getElementById('message').value;
                                        //       console.log(message);
                                        //       websocket.send("#anyone#"+message);
                                        //     } else {
                                        //       alert('未与服务器链接.');
                                        //     }
                                        //   }
                                        // });



                                        var websocket = null;
                                        //判断当前浏览器是否支持WebSocket
                                        if ('WebSocket' in window) {
                                            websocket = new WebSocket("ws://192.168.49.61:8080/websocket/<%=request.getSession().getAttribute("USER_ID")%>");
                                        }
                                        else {
                                            console.log('当前浏览器不支持 websocket')
                                        }

                                        //连接发生错误的回调方法
                                        websocket.onerror = function () {
                                            console.log("WebSocket连接发生错误");
                                        };


                                        //连接成功建立的回调方法
                                        websocket.onopen = function () {
                                            console.log("WebSocket连接成功"+<%=request.getSession().getAttribute("USER_ID")%>);
                                        }


                                        //接收到消息的回调方法
                                        websocket.onmessage = function (event) {
                                            // console.log(event.data);
                                            $("#flipInX").click();
                                            // alert("管理员给您发送了一条消息："+event.data);
                                            transferCircleNumber();

                                        }


                                        //连接关闭的回调方法
                                        websocket.onclose = function () {
                                            console.log("WebSocket连接关闭");
                                        }


                                        //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
                                        window.onbeforeunload = function () {
                                            closeWebSocket();
                                        }


                                        //关闭WebSocket连接
                                        function closeWebSocket() {
                                            websocket.close();
                                        }

                                    </script>
                                    <!--转换圆心数字-->
                                    <script>
                                        function transferCircleNumber() {
                                            $.ajax({
                                                type: "GET",
                                                url: "countMessage",
                                                dataType: "json",
                                                success: function (data) {
                                                    document.getElementById("notification").style.display = "block";
                                                    if (data == 0) {
                                                        document.getElementById("notification").style.display = "none";
                                                    }
                                                    document.getElementById("notification").innerText = data;
                                                    // noticeSum = data;
                                                },
                                                error: function () {
                                                    alert("ajax传送失败");
                                                }
                                            })
                                        }
                                    </script>

                                    <!--两个按钮开始-->
                                    <div class="cart-list-wrapper">
                                        <div class="minicart-button">
                                            <a onclick="wodeRedirect()"><i class="fa fa-user-plus"></i> 我的</a>
                                            <a href="/logout"><i class="fa fa-user-times"></i> 注销</a>
                                            <!--当管理员发消息时，会自动触发此按钮，相应的，会触发对应绑定的click事件，此按钮默认隐藏-->
                                            <button id="flipInX" class="notify btn" value="flipInX" style="display:none">flipInX</button>
                                            <script>
                                                var position=100;
                                                $("#flipInX").click(function (event) {
                                                    Notification.create(
                                                        // Title
                                                        "消息",
                                                        // Text
                                                        "您有一条新的消息",
                                                        // Illustration
                                                        "img/user.jpg",
                                                        // Effect
                                                        $(event.target).text(),
                                                        // Position
                                                        position
                                                    );
                                                });
                                            </script>
                                        </div>
                                    </div>
                                    <!--两个按钮结束-->
                                </li>
                                <!--登录结束-->
                            </ul>
                            <%}%>
                            <!--登录结束-->
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!--顶部条结束-->

        <!-- 顶部中间开始 -->
        <div class="header-main-area black-soft sticky">
            <div class="container">
                <div class="row align-items-center position-relative">
                    <!-- logo展示开始 -->
                    <div class="col-auto">
                        <div class="logo">
                            <a href="/">
                                <img src="/img/2.jpg" style="margin-bottom:58px" alt="Brand Logo">
                            </a>
                        </div>
                    </div>
                    <!-- logo展示结束 -->

                    <!-- 顶部标签栏开始 -->
                    <div class="col-auto position-static">
                        <div class="main-menu-area">
                            <div class="main-menu">
                                <!-- 标签栏开始 -->
                                <nav class="desktop-menu">
                                    <ul>
                                        <li class="active"><a href="/">主页 <i class="fa fa-angle-left"></i></a>
                                        </li>
                                        <li><a href="#">信息服务 <i class="fa fa-angle-down"></i></a>
                                            <ul class="dropdown">
                                                <li><a href="/getlist">失物招领 <i class="fa fa-align-center"></i></a>
                                                </li>
                                                <li><a href="/new_suggestion">发表建议 <i class="fa fa-align-center"></i></a>
                                                </li>
                                                <li><a href="#">新闻动态 <i class="fa fa-align-center"></i></a>
                                                </li>
                                                <li><a href="#">更多 <i class="fa fa-align-center"></i></a>
                                                </li>
                                            </ul>
                                        </li>
                                        <li><a href="/repairreport">报修服务 <i class="fa fa-angle-left"></i></a>
                                        </li>
                                        <li><a href="#">校园短信通<i class="fa fa-angle-left"></i></a>
                                        </li>
                                        <li><a href="#">联系我们</a></li>
                                    </ul>
                                </nav>
                                <!-- 标签栏结束 -->
                            </div>
                        </div>
                    </div>
                    <!-- 顶部标签栏结束 -->
                </div>
            </div>
        </div>
        <!-- 顶部中间结束 -->
    </div>
    <!-- header 结束 -->
</header>


<%--失物列表显示--%>
<main>
    <!-- 导航图片开始 -->
    <div class="breadcrumb-area breadcrumb-img bg-img" data-bg="img/6.jpg">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="breadcrumb-wrap">
                        <nav aria-label="breadcrumb">
                            <h3 class="breadcrumb-title">高校后勤综合信息管理平台</h3>
                            <ul class="breadcrumb justify-content-center">
                                <li class="breadcrumb-item"><a href="/"><i class="fa fa-home"></i></a></li>
                                <li class="breadcrumb-item"><a href="/getlist">失物招领中心</a></li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="blog-main-wrapper section-padding" style="height: 100px">
        <div class="row">
            <div class="col-lg-5 order-1"  style="text-align:center;margin: 0 auto;">
                <div class="blog-item-wrapper" >

                    <!-- 提交失物招领功能开始 -->
                    <div class="blog-comment-wrapper fugai" style="text-align:center;margin: 0 auto;">
                        <form action="fillLostForm">
                            <button class="btn btn-sqr search-trigger" style="margin:0 auto">我要失物招领 <i class="fa fa-pencil-square-o"></i></button>
                        </form>
                    </div>
                    <!-- 提交失物招领结束 -->
                </div>
            </div>
        </div>
    </div>
    <div class="blog-main-wrapper section-padding">
        <div class="container">
            <div class="row">
                <div style="margin-bottom: 10px;width: 100%" >
                    <h4 style="text-align: left;" align="center">大家的失物招领</h4>
                    <hr style="BORDER-TOP: #cbcbcb 1px dashed; OVERFLOW: hidden; HEIGHT: 1px"/>
                </div>
                <div class="myaccount-content blog-comment-wrapper" style="width: 1200px">
                    <div class="myaccount-table table-responsive text-center ">
                        <div class='search-div' style='margin-bottom: 10px; text-align: left'>
                            <input  id='search-keyword' type='text' placeholder="搜索..." style="height: 24px;float: none;margin: 0;"/>
                            <button class="table-operation-botton " id='' onclick="getUserByKeyword()" style="padding: 6px 8px;cursor: pointer;float: none;margin: 0;"><i class="fa fa-search"></i></button>
                        </div>
                        <div class="lostlist">

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>


<!-- 底部 start -->
<footer class="black-bg">
    <div class="footer-middle-area">
        <div class="container">
            <div class="row mtn-30">
                <div class="col-lg-6 col-sm-12">
                    <div class="address-block mt-30">
                        <div class="footer-logo">
                            <a href="/">
                                <img src="/img/2.jpg" alt="Brand Logo">
                            </a>
                        </div>
                        <address class="address-info d-flex align-items-center">
                            <i class="fa fa-map-marker"></i>
                            <p><span>ADDRESS : </span> 梦翔大厦</p>
                        </address>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6">
                    <address class="address-info email mt-30">
                        <i class="fa fa-envelope"></i>
                        <p><span>EMAIL : </span><a href="#">xxxx@qq.com</a></p>
                    </address>
                </div>
                <div class="col-lg-3 col-sm-6">
                    <address class="address-info email mt-30">
                        <i class="fa fa-phone"></i>
                        <p><span>PHONE : </span><a href="#">158xxxxx9442</a></p>
                    </address>
                </div>
            </div>
        </div>
    </div>
    <div class="footer-bottom-area text-center">
        <div class="container">
            <div class="row">
                <div class="newz2">
                    <div class="payment-method-list">

                    </div>

                    <p class="copyright">
                        Copyright © www.xxx.com
                    </p>
                </div>
            </div>
        </div>
    </div>
</footer>
<!-- 底部 end -->

<!-- JS
    ============================================ -->

<!-- Modernizer JS -->
<script src="/js/modernizr-3.6.0min.js"></script>
<!-- jQuery JS -->
<script src="/js/jquery-3.3.1min.js"></script>
<!-- Popper JS -->
<script src="/js/poppermin.js"></script>
<!-- Bootstrap JS -->
<script src="/js/bootstrapmin.js"></script>
<!-- slick Slider JS -->
<script src="/js/slickmin.js"></script>
<!-- Countdown JS -->
<script src="/js/countdownmin.js"></script>
<!-- Nice Select JS -->
<script src="/js/nice-selectmin.js"></script>
<!-- jquery UI JS -->
<script src="/js/jqueryuimin.js"></script>
<!-- Image zoom JS -->
<script src="/js/image-zoommin.js"></script>
<!-- image loaded js -->
<script src="/js/imagesloadedpkgdmin.js"></script>
<!-- masonry  -->
<script src="/js/masonrypkgdmin.js"></script>
<!-- mailchimp active js -->
<script src="/js/ajaxchimp.js"></script>
<!-- contact form dynamic js -->
<script src="/js/ajax-mail.js"></script>
<!-- google map api -->
<script src="http://ditu.google.cn/maps/api/js?key=AIzaSyCfmCVTjRI007pC1Yk2o2d_EhgkjTsFVN8"></script>
<!-- google map active js -->
<script src="/js/google-map.js"></script>
<!-- Main JS -->
<script src="/js/main.js"></script>

</body>
</html>
